<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<!-- TODO(esprehn): Can we use the non full version of sugar? -->
<script src="../bower_components/sugar/release/sugar-full.min.js"></script>

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-router/app-router.html">

<script src="../extra-sugar.js"></script>

<!-- diff parsing -->
<script src="../diff/diff_line.js"></script>
<script src="../diff/diff_group.js"></script>
<script src="../diff/diff_parser.js"></script>

<!-- diff dom tree building -->
<script src="../diff/syntax_highlighter.js"></script>
<script src="../diff/intraline_diff_context.js"></script>
<script src="../diff/intraline_diff_side.js"></script>
<script src="../diff/diff_builder_base.js"></script>
<script src="../diff/diff_builder_unified.js"></script>
<script src="../diff/diff_builder_side_by_side.js"></script>

<script src="../resources.js"></script>

<script src="../model/draft_patch_set.js"></script>
<script src="../model/message_base.js"></script>
<script src="../model/issue.js"></script>
<script src="../model/issue_list.js"></script>
<script src="../model/issue_message.js"></script>
<script src="../model/patch_file.js"></script>
<script src="../model/patch_file_message.js"></script>
<script src="../model/patch_set.js"></script>
<script src="../model/search.js"></script>
<script src="../model/search_result.js"></script>
<script src="../model/user.js"></script>
<script src="../model/user_settings.js"></script>

<link rel="import" href="../common/cr-action.html">
<link rel="import" href="../common/cr-keyboard.html">
<link rel="import" href="../common/cr-title-handler.html">
<link rel="import" href="../common/cr-view-handler.html">

<link rel="import" href="../views/cr-file-view.html">
<link rel="import" href="../components/cr-keystroke-help-dialog.html">

<link rel="import" href="../views/cr-inbox-view.html">
<link rel="import" href="../views/cr-issue-view.html">
<link rel="import" href="../views/cr-search-view.html">
<link rel="import" href="../views/cr-settings-view.html">
<link rel="import" href="../views/cr-user-view.html">

<polymer-element name="cr-app" on-navigate="{{ handleNavigate }}" on-login="{{ handleLogin }}">
    <template>
        <cr-view-handler></cr-view-handler>
        <cr-title-handler titlesuffix="Code Review"></cr-title-handler>
        <link rel="stylesheet" href="../common/common.css">
        <style>
            :host { display: block; }

            .page-header {
                background-color: #212121;
                font-size: 1.1em;
                -webkit-user-select: none;
                cursor: default;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                -webkit-align-items: center;
            }

            .page-header span,
            .page-header img {
                vertical-align: middle;
            }

            .title {
                flex: 1;
                -webkit-flex: 1;
            }

            .title a:link,
            .title a:visited {
                padding: 0.25em 4px;
                display: inline-block;
                color: white;
                text-decoration: none;
            }

            .view-links {
                display: -webkit-flex;
                display: flex;
            }

            .view-links a {
                color: white;
                flex-shrink: 0;
                -webkit-flex-shrink: 0;
                margin-right: 16px;
                display: block;
            }

            .view-links .bug-report {
                color: #D99E05;
            }

            .page-header img {
                width: 25px;
            }

            app-router,
            active-route {
                display: block;
            }

            app-route {
                display: none;
            }

            @media (max-width: 500px) {
                .view-links .bug-report {
                    display: none;
                }
            }
        </style>
        <header class="page-header">
            <div class="title">
                <a href="/">
                    <img src="../images/chromium-logo-50.png">
                    <span>Code Review</span>
                </a>
            </div>
            <div class="view-links">
                <a class="gerrit-link"
                   href="https://chromium-review.googlesource.com/dashboard/self?polygerrit=1"
                   target="_blank">Open Gerrit</a>
                <a class="bug-report"
                   href="https://code.google.com/p/chromium/issues/entry?labels=Type-Bug,Pri-2,Infra-Area-Rietveld"
                   target="_blank">Report a bug</a>
                <a href="/search" class="search-link">Search</a>
                <template if="{{ user }}">
                    <a href="/settings">{{ user.email }}</a>
                </template>
                <template if="{{ !user }}">
                    <a is="cr-action" on-tap="{{ handleLogin }}">Login</a>
                </template>
            </div>
        </header>
        <app-router id="router" trailingSlash="ignore">
            <app-route path="/" element="cr-inbox-view"></app-route>
            <app-route path="/search" element="cr-search-view"></app-route>
            <app-route path="/settings" element="cr-settings-view"></app-route>
            <app-route path="/user/:username" element="cr-user-view"></app-route>
            <app-route path="/:issueId" element="cr-issue-view"></app-route>
            <app-route path="/\d+\/diff\/\d+\/.*/" regex element="cr-file-view"></app-route>
            <app-route path="/\d+\/patch\/\d+\/\d+/" regex element="cr-file-view"></app-route>
        </app-router>

        <div id="dialogs"></div>

        <cr-keyboard on-key-question-mark="{{ handleKeystrokeHelpKey }}"
                     global></cr-keyboard>
    </template>
    <script>
        Polymer({
            created: function() {
                this.user = User.current;
            },
            attached: function() {
                var self = this;
                User.loadCurrentUser({cached:true}).then(function() {
                    self.classList.add("login");
                }).catch(function(e) {
                    self.classList.add("no-login");
                });
            },
            handleNavigate: function(event) {
                var currentUrl = window.location.pathname + window.location.search + window.location.hash;
                if (currentUrl != event.detail.url)
                    window.history.pushState(null, null, event.detail.url);
                this.$.router.go();
                ga('send', 'pageview', {
                  "page": window.location.pathname +
                      window.location.search,
                  "title": document.title
                });
            },
            handleLogin: function() {
                location.href = User.getLoginUrl();
            },
            showDialog: function(dialog) {
                this.$.dialogs.appendChild(dialog);
                dialog.addEventListener("close", function() {
                    dialog.remove();
                });
                dialog.showModal();
            },
            showKeystrokeHelpDialog: function() {
                var dialog = document.createElement("cr-keystroke-help-dialog");
                this.showDialog(dialog);
            },
            handleKeystrokeHelpKey: function(event) {
                event.preventDefault();
                this.showKeystrokeHelpDialog();
            },
        });
    </script>
</polymer-element>
